import { Component } from "react";

import { nanoid } from "nanoid";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";
import TodoItem, { type ITodo } from "./components/TodoItem";

interface IProps {}
interface IState {
  statusText: string; // "All" | "Active" | "Completed";
  inputValue: string;
  todos: ITodo[];
}

export default class App extends Component<IProps, IState> {
  state = {
    statusText: "All",

    inputValue: "打豆豆",

    todos: [
      {
        id: "001",
        title: "吃饭",
        isDone: true,
      },
      {
        id: "002",
        title: "睡觉",
        isDone: false,
      },
      {
        id: "003",
        title: "打豆豆",
        isDone: false,
      },
      {
        id: "004",
        title: "洗脚",
        isDone: false,
      },
      {
        id: "005",
        title: "按摩",
        isDone: true,
      },
    ],
  };

  handleChange = (newValue: string) => {
    this.setState({ inputValue: newValue });
  };

  handleConfirm = (value: string) => {
    console.log("handleConfirm", value);

    // 追加一个新的todo到todos 中
    this.setState((state) => ({
      todos: [...state.todos, { id: nanoid(), title: value, isDone: false }],
    }));
  };

  handleToggle = (checked: boolean) => {
    console.log("handleToggle", checked);
    // if (checked) {
    //   this.setState((state) => ({
    //     todos: state.todos.map((item) => ({ ...item, isDone: true })),
    //   }));
    // } else {
    //   this.setState((state) => ({
    //     todos: state.todos.map((item) => ({ ...item, isDone: false })),
    //   }));
    // }

    this.setState((state) => ({
      todos: state.todos.map((item) => ({ ...item, isDone: checked })),
    }));
  };

  handleItemChange = (todo: ITodo) => {
    console.log("todo", todo);

    // 修改数组，使用 map
    this.setState(
      (state) => ({
        todos: state.todos.map((item) => {
          if (item.id === todo.id) {
            return todo;
          } else {
            return item;
          }
        }),
      }),
      () => {
        console.log("最新State", this.state.todos);
      }
    );
  };

  handleItemDelete = (id: string) => {
    this.setState((state) => ({
      todos: state.todos.filter((item) => item.id !== id),
    }));
  };

  render() {
    const { statusText, inputValue, todos } = this.state;

    // 基于 statusText 与 todos 计算出页面要用到的 todos
    const displayTodos = todos.filter((item) => {
      if (statusText === "Active") {
        return item.isDone === false;
      } else if (statusText === "Completed") {
        return item.isDone === true;
      } else {
        return true;
      }
    });

    // 基于 todos 计算出一个 isAllChecked 来
    const isAllChecked = todos.every((item) => item.isDone);
    console.log("isAllChecked", isAllChecked);

    return (
      <div className="todoapp">
        <h1>todos</h1>

        <TodoHeader
          isAllChecked={isAllChecked}
          value={inputValue}
          onChange={this.handleChange}
          onConfirm={this.handleConfirm}
          onToggle={this.handleToggle}
        />

        <TodoMain>
          {displayTodos.map((item) => (
            <TodoItem
              {...item}
              key={item.id}
              onChange={this.handleItemChange}
              onDelete={this.handleItemDelete}
            />
          ))}
        </TodoMain>

        <TodoFooter
          statusText={statusText}
          onChange={(text) => {
            this.setState({ statusText: text });
          }}
        />
      </div>
    );
  }
}
